<template>
  <div class="dashboard">
    <!-- 导航卡片 -->
    <nav-card />

    <!-- 数据卡片 -->
    <data-card class="mt-4" />

    <!-- 分析 -->
    <div class="mt-4 px-1 py-1 bg-white">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
          <!-- <component :is="item.component" /> -->
        </el-tab-pane>
      </el-tabs>
      <sales-volume v-if="activeName==='salesVolume'" />
      <visits v-if="activeName==='Visits'" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DataCard from './components/DataCard.vue'
import NavCard from './components/NavCard.vue'
import SalesVolume from './components/SalesVolume.vue'
import Visits from './components/Visits.vue'
import type { AnalysisTabType } from './type'

const activeName = ref('salesVolume')
const tabList:Array<AnalysisTabType> = [
  { label: '销售额', name: 'salesVolume', component: SalesVolume },
  { label: '访问量', name: 'Visits', component: Visits }
]

const handleClick = () => {}

</script>

<style lang="scss" scoped>

</style>
